import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
    Pressable,
} from "react-native";
import Decimal from 'decimal.js'

import * as FORM from "./Form"
import Constant from "../constant/Constant";
import util from "../common/utils/util";
import { CFlex, CColor, CStyle } from "../constant/css";
import { useSetState, useCurrent } from "../common/hooks";

const tagColor = [CColor.Blue, "#f64f59", "#c471ed", "#12c2e9", CColor.Green,]
/**
 * * APP 商品 Item 组件
 * @param {object} props 参数项
 * @param {object} props.item 数据
 * @param {Function} props.onclick 事件
 * @returns {React.ReactElement}
 */
const ProductItem = (props) => {
    const { item = {}, onclick = null, singleLast = false } = props
    return (
        <Pressable style={styles.contain} onPress={() => onclick?.()}>
            <FORM.ExpoImage
                style={[styles.image, { height: singleLast ? 240 : styles.image.height }]}
                contentFit="cover"
                source={item.cover ? { uri: item.cover } : require('./../assets/404.svg')} />
            <View style={{ flex: 1, marginTop: 0, padding: 5 }}>
                <View style={[CFlex.row, CFlex.sc]}>
                    <View style={[CStyle.tag, { marginRight: 5 }]}>
                        <Text style={{ color: CColor.White, fontSize: 9 }}>{item.pIp}</Text>
                    </View>
                    <Text numberOfLines={1} style={{ flex: 1, color: CColor.Black, fontWeight: 'bold' }}>
                        {item.name}
                    </Text>
                </View>
                <View>
                    <View style={[CFlex.row, CFlex.sc, { marginTop: 5 }]}>
                        <View>
                            <Text style={{ color: CColor.Black, fontSize: 12 }}>{`${item.sourceDesc} / `}</Text>
                        </View>
                        <View>
                            <Text style={{ color: CColor.Black, fontSize: 12 }}>{item.categoryDesc}</Text>
                        </View>
                    </View>
                    <View style={{ marginTop: 5 }}>
                        <Text style={{ color: CColor.Black, fontSize: 12 }}>{util.dayjs(item.enterDate).format('YYYY-MM-DD HH:mm')}</Text>
                    </View>
                </View>
                <View style={[CFlex.row, CFlex.ec, { marginTop: 15 }]}>
                    <View>
                        <Text style={{ color: CColor.Red, fontSize: 12 }}>{`￥${item.buyPrice}/`}</Text>
                    </View>
                    <View>
                        <Text style={{ color: CColor.Red, fontSize: 12 }}>{new Decimal(item.sellPrice).toNumber() !== 0 ? `￥${item.sellPrice}` : '待定'}</Text>
                    </View>
                </View>
                <View style={[styles.stock]}>
                    <Text style={{ color: CColor.White, fontSize: 10, fontWeight: 'bold' }}>{item.stock}</Text>
                </View>
            </View>
            <View style={[styles.tag, { backgroundColor: tagColor?.[item.status] || '' }]}>
                <Text style={{ color: CColor.White, fontSize: 10 }}>{item.statusDesc}</Text>
            </View>
            <View style={[styles.boxPriceTag]}>
                <Text style={{ color: CColor.White, fontSize: 12 }}>{parseInt(item.boxPrice)}</Text>
            </View>
        </Pressable>
    )
}

const styles = StyleSheet.create({
    contain: {
        flex: 1,
        borderRadius: 5,
        margin: 2,
        backgroundColor: '#fff'
    },
    image: {
        width: '100%',
        height: 120,
        borderTopLeftRadius: 5,
        borderTopRightRadius: 5,
    },
    boxPriceTag: {
        position: 'absolute',
        right: 0,
        top: 0,
        backgroundColor: CColor.Origin,
        height: 25,
        width: 25,
        ...CFlex.cc,
        borderBottomLeftRadius: 15,
    },
    tag: {
        position: 'absolute',
        left: 0,
        top: 0,
        backgroundColor: CColor.Origin,
        width: 40,
        height: 20,
        // borderRadius: 5,
        borderTopLeftRadius: 5,
        borderBottomRightRadius: 5,
        ...CFlex.cc,
    },
    stock: {
        position: 'absolute',
        backgroundColor: CColor.Red,
        width: 20,
        height: 20,
        borderRadius: 20,
        left: 5,
        bottom: 5,
        ...CFlex.cc,
    }
})

export default ProductItem